
import { PureComponent } from 'react';
import { isNull } from '../../utils/request';
import { calcField, filterTemplate } from '../../utils/helper';
import MAction from '../MAction/MAction';
import moment from "moment";
interface Props {
  list: any,
  type?: any,
  dataset_key?: string,
  config?: {
    [k: string]: any
  },
  template?: string,
  componentStyle?: object,
  formData?: object,
  event_key?: string,
  use_current_time?: any,//是否用当前时间
  format?: any,
}
interface State {
  [k: string]: any
}
export default class MiHtmlCard extends PureComponent<Props, State> {
  timer: any = null;
  constructor(props) {
    super(props);
    this.state = {
      current_time: moment()
    }
  }
  componentWillMount() {
    let { use_current_time } = this.props;
    if (use_current_time == 1) {
      this.timer = setInterval(() => {
        this.setState({
          current_time: moment()
        })
      }, 1000)
    }
  }
  type1 = () => {
    return {
      renderImg: (img) => {
        if (isNull(img)) {
          return null
        }
        else {
          let { list } = this.props;
          let { url, style, text } = img;
          if (isNull(url)) {
            text = calcField(url, list);
            return <span dangerouslySetInnerHTML={{ __html: text }}></span>
          }
          else {
            url = calcField(url, list);
            style = {
              width: "40px",
              height: "40px",
              margin: "10px",
              ...style
            }
            return (
              <img style={style} src={url} alt="" />
            )
          }
        }
      },
      renderRemark: (remark) => {
        if (isNull(remark)) {
          return null
        }
        else {
          let { list } = this.props;
          let { text, style } = remark;
          text = calcField(text, list);
          style = {
            fontSize: "19px",
            fontWeight: 700,
            margin: "3px 0",
            ...style
          }
          return (
            <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          )
        }
      },
      renderDesc: (desc) => {
        if (isNull(desc)) {
          return null
        }
        else {
          let { list } = this.props;
          let { text, style } = desc;
          text = calcField(text, list);
          style = {
            fontSize: "12px",
            color: "#999",
            ...style
          }
          return (
            <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          )
        }
      }
    }
  }
  type2 = () => {
    return {
      renderText: (item, str) => {
        if (isNull(item)) {
          return null;
        }
        else {
          let { list } = this.props;
          let { text, style } = item;
          text = calcField(text, list);
          if (str == "title") {
            style = {
              color: "#666",
              ...style
            }
          }
          else if (str == "remark") {
            style = {
              textAlign: "center",
              fontSize: "25px",
              fontWeight: 600,
              margin: "10px 0",
              ...style
            }
          }
          else if (str == "desc") {
            style = {
              textAlign: "right",
              fontSize: "14px",
              color: "#ccc",
              ...style
            }
          }
          return (
            <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          )
        }
      }
    }
  }
  type3 = () => {
    return {
      renderImg: (img) => {
        if (isNull(img)) {
          return (
            <div>
            </div>
          )
        }
        else {
          let { list } = this.props;
          let { url, style, text } = img;
          if (isNull(url)) {
            text = calcField(text, list);
            return <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          }
          else {
            url = calcField(url, list);
            style = {
              width: "30px",
              height: "30px",
              margin: "10px",
              ...style
            }
            return (
              <div>
                <img style={style} src={url} alt="" />
              </div>
            )
          }
        }
      },
      renderLeft: (left) => {
        if (isNull(left)) {
          return null
        }
        else {
          let { list } = this.props;
          let { top, bottom } = left;
          let topHtml, bottomHtml;
          if (!isNull(top)) {
            let { text, style } = top;
            text = calcField(text, list);
            style = {
              ...style
            }
            topHtml = <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          }
          if (!isNull(bottom)) {
            let { text, style } = bottom;
            text = calcField(text, list);
            style = {
              color: "#999",
              ...style
            }
            bottomHtml = <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          }
          return (
            <div style={{ width: "70%" }}>
              {topHtml}
              {bottomHtml}
            </div>
          )
        }
      },
      renderText: (item, str) => {
        if (isNull(item)) {
          return null;
        }
        else {
          let { list } = this.props;
          let { text, style } = item;
          text = calcField(text, list);
          if (str === "middle") {
            style = {
              width: "15%",
              textAlign: "right",
              fontSize: "16px",
              ...style
            }
          }
          if (str === "right") {
            style = {
              width: "15%",
              textAlign: "right",
              fontSize: "12px",
              ...style
            }
          }
          return (
            <div style={style} dangerouslySetInnerHTML={{ __html: text }}></div>
          )
        }
      }
    }
  }
  render() {
    let { type, dataset_key, list, config = {}, template, componentStyle, formData, format } = this.props;
    if (!isNull(dataset_key) && list instanceof Array) {
      return null;
    }
    let { current_time } = this.state;
    if (isNull(format)) {
      format = "YYYY-MM-DD HH:mm:ss"
    }
    list = {
      ...formData,
      ...list,
      _current_time: current_time.format(format)
    }
    if (!isNull(template)) {
      return <div style={componentStyle} dangerouslySetInnerHTML={{ __html: filterTemplate(template, list) }} onClick={() => {
        MAction({ ...this.props, formData: list }, this.props.event_key)
      }}></div>
    }
    if (type == 1) {//左右结构 左边是图片 右边是两行
      let { img, remark, desc, style } = config;
      return (
        <div data-flex="dir:left cross:center box:first" style={{ padding: "5px", ...componentStyle, ...style }} onClick={() => {
          MAction({ ...this.props, formData: list }, this.props.event_key)
        }}>
          {this.type1().renderImg(img)}
          <div>
            {this.type1().renderRemark(remark)}
            {this.type1().renderDesc(desc)}
          </div>
        </div>
      )
    }
    else if (type == 2) {//上中下结构 三行
      let { title, remark, desc, style } = config;
      return (
        <div data-flex="dir:top main:center" style={{ padding: "5px", ...componentStyle, ...style }} onClick={() => {
          MAction({ ...this.props, formData: list }, this.props.event_key)
        }}>
          {this.type2().renderText(title, "title")}
          {this.type2().renderText(remark, "remark")}
          {this.type2().renderText(desc, "desc")}
        </div>
      )
    }
    else if (type == 3) {//左右架构 四列 1 图片 2 两行 3 4 
      let { img, left, middle, right, style } = config;
      return (
        <div data-flex="cross:center box:first" style={{ padding: "5px", ...componentStyle, ...style }}
          onClick={() => {
            MAction({ ...this.props, formData: list }, this.props.event_key)
          }}
        >
          {this.type3().renderImg(img)}
          <div data-flex="dir:left cross:center">
            {this.type3().renderLeft(left)}
            {this.type3().renderText(middle, "middle")}
            {this.type3().renderText(right, "right")}
          </div>
        </div>
      )
    }
    return null;
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
}